<%--
  Created by IntelliJ IDEA.
  User: MECHREVO
  Date: 2021/4/1
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>

<link href="${pageContext.request.contextPath}/ui/layui/css/layui.css" type="text/css" rel="stylesheet"/>
<style>
    .box{
        width: 100%;
        height: 2000px;
        background: #0C0C0C;
    }
    .layui-carousel{
        position: relative;
        left: 201px;
        width: 1699px;
        height: 459px;
    }

</style>
<body>
<div class="box">
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="">首页</a></li>

            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/demandhall">需求大厅</a></li>
            <li class="layui-nav-item" style="margin-left: 1532px;">
                <a href="javascript:;">${userinfo.userName}</a>
                <dl class="layui-nav-child">
                    <dd><a href="${pageContext.request.contextPath}/updatedanInfo">基本信息</a></dd>
                    <dd><a href="${pageContext.request.contextPath}/anquan">安全管理</a></dd>

                </dl>
            </li>
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/WEB-INF/jsp/login.jsp">退出</a></li>
        </ul>
        <div style="height: 100%;width: 50px;">
        <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
            <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;">默认展开</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">选项一</a></dd>
                    <dd><a href="javascript:;">选项二</a></dd>
                    <dd><a href="javascript:;">选项三</a></dd>
                    <dd><a href="">跳转项</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">解决方案</a>
                <dl class="layui-nav-child">
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">云市场</a></li>
            <li class="layui-nav-item"><a href="">社区</a></li>
        </ul>
        </div>

        <div class="layui-carousel" id="test1" lay-filter="test1" >
            <div carousel-item="" >
                <div><img src="/img/fcb.jpg" width="100px" height="100px"></div>
                <div>条目2</div>
                <div>条目3</div>
                <div>条目4</div>
                <div>条目5</div>
            </div>
        </div>
</div>

</body>

<script src="${pageContext.request.contextPath}/ui/layui/layui.js"></script>
<script type="application/javascript">
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;

        //常规轮播
        carousel.render({
            elem: '#test1'
            ,arrow: 'always'
        });

        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test2'
            ,interval: 1800
            ,anim: 'fade'
            ,height: '120px'
        });

        //设定各种参数
        var ins3 = carousel.render({
            elem: '#test3'
        });
        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '778px'
            ,height: '440px'
            ,interval: 5000
        });

        //事件
        carousel.on('change(test4)', function(res){
            console.log(res)
        });

        var $ = layui.$, active = {
            set: function(othis){
                var THIS = 'layui-bg-normal'
                    ,key = othis.data('key')
                    ,options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function(){
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function(){
            var value = this.value
                ,options = {};
            if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>
</html>
